<template>
  <div :class="$style.board">
    <el-dialog v-model="open" fullscreen :before-close="backStorage">
      <el-row>
        <el-col :span="8">
          <div
            style="
              height: 66px;
              width: 140px;
              line-height: 95px;
              text-align: center;
            "
          >
            <img
              style="height: 36px"
              src="../../../assets/images/favorite3.png"
            />
          </div>
        </el-col>
        <el-col :span="8"><h1 :class="$style.title">战 情 看 板</h1></el-col>
        <el-col :span="8" style="display: flex; justify-content: flex-end">
          <v-mini-weather
            size="small"
            type="multiline"
            color="99f2c8"
            :iconSize="60"
            url="/proxy_weather/index.php"
          ></v-mini-weather>
          <div
            v-html="nowTime"
            style="color: white; font-size: 20px; text-align: right"
          ></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div :class="$style.label">24H内首件NG</div>
          <el-table :data="datazq.ngv" border>
            <el-table-column
              label="机台"
              align="center"
              width="70"
              prop="sdm_jtbh"
            />
            <el-table-column
              label="产品编码"
              align="center"
              width="125"
              prop="itm_custwldm"
            />
            <el-table-column
              label="开始时间"
              align="center"
              width="125"
              prop="sdm_ksrq"
            />
            <el-table-column
              label="不良内容"
              align="center"
              min-width="150"
              prop="sjl_desc"
            />
          </el-table>
          <div :class="$style.label">实时品质异常</div>
          <el-table :data="datazq.pzv" border>
            <el-table-column
              label="机台"
              align="center"
              width="70"
              prop="sdm_jtbh"
            />
            <el-table-column
              label="产品编码"
              align="center"
              width="125"
              prop="itm_custwldm"
            />
            <el-table-column
              label="开始时间"
              align="center"
              width="125"
              prop="sdm_ksrq"
            />
            <el-table-column
              label="不良内容"
              align="center"
              min-width="150"
              prop="ycl_yyms"
            />
          </el-table>
          <div :class="$style.label">机台入库率</div>
          <el-table :data="inStorage" border>
            <el-table-column
              label="机台"
              align="center"
              width="70"
              prop="jtbh"
            />
            <el-table-column
              label="总入库率"
              align="center"
              min-width="125"
              prop="totalRate"
            >
              <template #default="scope">{{
                scope.row.totalRate | percentage
              }}</template>
            </el-table-column>
            <el-table-column
              label="白班入库率"
              align="center"
              min-width="125"
              prop="dayRate"
            >
              <template #default="scope">{{
                scope.row.dayRate | percentage
              }}</template>
            </el-table-column>
            <el-table-column
              label="晚班入库率"
              align="center"
              min-width="125"
              prop="nigthRate"
            >
              <template #default="scope">{{
                scope.row.nigthRate | percentage
              }}</template>
            </el-table-column>
          </el-table>
          <div :class="$style.label">机台不良率前三</div>
          <v-chart :options="blvOption" style="width: 100%; height: 250px" />
        </el-col>
        <el-col :span="8">
          <v-chart
            :options="kjvOption"
            style="
              width: 100%;
              height: 380px;
              display: flex;
              justify-content: center;
            "
          />
          <v-chart
            :options="scvOption"
            style="
              width: 100%;
              height: 380px;
              display: flex;
              justify-content: center;
            "
          />
        </el-col>
        <el-col :span="8">
          <div :class="$style.label">模具故障</div>
          <el-table :data="datazq.mjv" border>
            <el-table-column
              label="机台"
              align="center"
              width="70"
              prop="sdm_jtbh"
            />
            <el-table-column
              label="产品编码"
              align="center"
              width="100"
              prop="itm_custwldm"
            />
            <el-table-column
              label="模具编码"
              align="right"
              min-width="150"
              prop="moe_mjbh"
              class-name="text-right"
            />
            <el-table-column
              label="开始时间"
              align="center"
              width="120"
              prop="sdm_ksrq"
            />
            <el-table-column
              label="持续时间"
              align="center"
              width="100"
              prop="xml_cxsj"
            />
          </el-table>
          <div :class="$style.label">机台故障</div>
          <el-table :data="datazq.jtv" border>
            <el-table-column
              label="机台"
              align="center"
              width="70"
              prop="wxm_sbdm"
            />
            <el-table-column
              label="开始时间"
              align="center"
              width="100"
              prop="wxm_kssj"
            />
            <el-table-column
              label="持续时间"
              align="center"
              width="120"
              prop="wxm_wxgs"
            />
            <el-table-column
              label="故障内容"
              align="center"
              min-width="135"
              prop="wxm_clms"
            />
          </el-table>
          <div :class="$style.label">瓶颈物料产能</div>
          <el-table :data="datazqbl.bottle" border>
            <el-table-column
              label="机台"
              align="center"
              width="70"
              prop="moeJtbh"
            />
            <el-table-column
              label="产品编码"
              align="center"
              width="100"
              prop="itmCustwldm"
            />
            <el-table-column
              label="目标产能"
              align="center"
              min-width="125"
              prop="blNum"
            />
            <el-table-column
              label="白班产能"
              align="center"
              min-width="125"
              prop="blBbsl"
            />
            <el-table-column
              label="夜班产能"
              align="center"
              min-width="125"
              prop="blYbsl"
            />
          </el-table>
          <div :class="$style.label">机台生产效率</div>
          <el-table :data="datazq.sclSecond" border>
            <el-table-column
              label="机台"
              align="center"
              width="70"
              prop="rzmJtbh"
            />
            <el-table-column
              label="有效生产时间"
              align="center"
              min-width="150"
              prop="scTime"
            >
              <template #default="scope">{{
                formatDu(scope.row.scTime)
              }}</template>
            </el-table-column>
            <el-table-column
              label="开机时间"
              align="center"
              min-width="150"
              prop="totalTime"
            >
              <template #default="scope">{{
                formatDu(scope.row.totalTime)
              }}</template>
            </el-table-column>
            <el-table-column
              label="生产效率"
              align="center"
              min-width="90"
              prop="scRate"
            >
              <template #default="scope">{{
                scope.row.scRate | percentage
              }}</template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div slot="footer"></div>
    </el-dialog>
  </div>
</template>

<script>
import BoardService from "@/api/board/board";
import { white } from "chalk";
import { vMiniWeather } from "vue-mini-weather";
import axios from "axios";

const sortColors = ["red", "orange", "yellow", "blue", "green"];
export default {
  name: "BoardSituation",
  components: {
    vMiniWeather,
  },
  data() {
    return {
      open: true,
      kjvOption: {
        tooltip: {
          formatter: "{b} : {c}%",
        },
        series: [
          {
            name: "kjl",
            type: "gauge",
            detail: {
              formatter: "{value}%",
            },
            data: [
              {
                value: 0,
                name: "开机率",
              },
            ],
            axisLine: {
              lineStyle: {
                color: [
                  [0.3, "red"], // 0~10% 红轴
                  [0.8, "orange"], // 10~20% 绿轴
                  [1, "green"], // 20~30% 蓝轴
                  // ...
                ],
              },
            },
            title: {
              color: "white",
              fontSize: 20,
              offsetCenter: ["0", "75%"],
            },
          },
        ],
      },
      scvOption: {
        tooltip: {
          formatter: "{b} : {c}%",
        },
        series: [
          {
            min: 50,
            name: "scxl",
            type: "gauge",
            detail: {
              formatter: "{value}%",
            },
            data: [
              {
                value: 0,
                name: "生产效率",
              },
            ],
            axisLine: {
              lineStyle: {
                color: [
                  [0.3, "red"], // 0~10% 红轴
                  [0.8, "orange"], // 10~20% 绿轴
                  [1, "green"], // 20~30% 蓝轴
                  // ...
                ],
              },
            },
            title: {
              color: "white",
              fontSize: 20,
              offsetCenter: ["0", "75%"],
            },
          },
        ],
      },
      blvOption: {
        dataset: {
          dimensions: ["moe_jtbh", "moe_blv", "itm_custwldm"],
          source: [],
        },
        xAxis: {
          splitLine: {
            show: false,
          },
        },
        grid: {
          top: 20,
          right: 200,
          bottom: 20,
          left: 50,
        },
        yAxis: {
          type: "category",
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          axisLabel: {
            color: "white",
            fontSize: "18",
          },
          max: 2, // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            type: "bar",
            barWidth: "50%",
            itemStyle: {
              color: function (param) {
                return sortColors[param.dataIndex];
              },
            },
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
              formatter: "{@moe_blv} % （{@itm_custwldm}）",
              fontSize: 20,
              color: "white",
            },
          },
        ],
        legend: {
          show: false,
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
      },
      datazq: {
        kjv: {
          kjv: 0.4857,
        },
        scv: 0,
        mjv: [],
        //bottle: [],
        ngv: [],
        pzv: [],
        blv: [],
        jtv: [],
      },
      datazqbl: {
        bottle: [],
      },
      inStorage: [],
      nowTime: this.$moment().format("YYYY年MM月DD日 <br> dddd <br> HH:mm"),
    };
  },
  destroyed() {
    console.log("destroyed-----sit");
    this.clearIntvers();
  },
  mounted() {
    console.log("mounted-----sit");
    this.getList();
    this.getblList();
    this.creatIntvers();
    this.getTopFiveInStorage();
  },

  methods: {
    creatIntvers() {
      this.clearIntvers();
      this.intver1 = setInterval(() => {
        this.getList();
      }, 60000);

      this.intver2 = setInterval(() => {
        this.getblList();
      }, 600000);

      this.timer2 = setInterval(() => {
        axios
          .get("/getsystemtime")
          .then((res) => {
            const t = res.data;
            this.nowTime = this.$moment
              .unix(t.timestamp)
              .format("<br>  YYYY年MM月DD日 <br> dddd <br> HH:mm");
          })
          .catch((e) => {
            console.log(e);
            this.nowTime = this.$moment().format(
              "<br>  YYYY年MM月DD日 <br> dddd <br> HH:mm"
            );
          });
      }, 60000);
      // 一小时请求一次
      this.intver3 = setInterval(() => {
        this.getTopFiveInStorage();
      }, 3600000);
    },
    clearIntvers() {
      if (this.intver1) clearInterval(this.intver1);
      if (this.intver2) clearInterval(this.intver2);
      if (this.intver3) clearInterval(this.intver3);
      if (this.timer2) clearInterval(this.timer2);
    },
    formatDu(a) {
      let du = this.$moment.duration(a * 1000);
      return du.hours() + "小时" + du.minutes() + "分钟";
    },
    getList() {
      BoardService.getSituationView().then((res) => {
        this.datazq = res;
        this.datazq.jtv = this.datazq.jtv.map((a) => {
          a.wxm_kssj = this.$moment(a.wxm_kssj).format("YYYY-MM-DD");
          return a;
        });
        this.kjvOption.series[0].data[0].value = (
          this.datazq.kjv.kjv * 100
        ).toFixed(1);
        if (this.datazq.scv > 1) this.datazq.scv = 0.98;
        this.scvOption.series[0].data[0].value = (
          this.datazq.scv * 100
        ).toFixed(1);
        this.blvOption.dataset.source = res.blv.map((a) => {
          a.moe_blv = a.moe_blv > 1 ? 100 : (a.moe_blv * 100).toFixed(1);
          return a;
        });
      });
    },
    getblList() {
      BoardService.getSituationViewBl().then((res) => {
        this.datazqbl.bottle = res.bottle;
      });
    },
    getTopFiveInStorage() {
      BoardService.getTopFiveInStorage().then((res) => {
        this.inStorage = res;
      });
    },
    backStorage() {
      this.open = false;
      // 返回上级路由并关闭当前路由
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      );
      this.$router.push({ path: "/index" });
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      console.log("beforeRouteEnter-----sit");
      vm.open = true;
      vm.creatIntvers();
      // 通过 `vm` 访问组件实例
    });
  },
  beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave-----sit");
    this.clearIntvers();
    next();
  },
};
</script>

<style lang="scss" module>
@use "./board.scss";
.board {
  :global {
    .el-dialog {
      background-image: url("../../../assets/images/bj.jpg");
      background-size: 100% 100%;
    }
    .el-table {
      border-color: aquamarine;
      background-color: transparent;
      &::before,
      &::after {
        background-color: aquamarine;
      }
      > div {
        background-color: transparent;
        tr {
          background-color: transparent;
          th,
          td {
            background-color: transparent;
            border-color: aquamarine;
          }
        }
      }
      .cell {
        font-size: 18px;
        color: white;
        height: 36px;
        line-height: 36px;
      }
    }
    .text-right {
      direction: rtl; // 设置文字方向为从右到左
    }
  }
  .label {
    font-weight: 700;
    color: white;
    font-size: 21px;
    margin: 20px 0px 5px 0px;
    &::after {
      content: "：";
    }
  }
  .title {
    text-align: center;
    color: #fdfbfd;
    font-size: 70px;
    font-family: monospace;
    text-shadow: 1px 1px #b1bbca, 3px 2px #b1bbca;
  }
}
.echartBorder {
  /*border: 1px solid red;*/
  position: relative;
  background: url("../../../assets/images/wange.png") repeat 50% 50% !important;
  border: 2px solid rgba(92, 255, 255, 0.1);
  background-blend-mode: screen;
  overflow: visible;
}
</style>
